<template>
  <div>
    <my-header></my-header>
    <div
      class="header"
      v-for="{lian, shijian, tag, tag1, tag3, tid, title_trip} in data"
      :key="tid"
    >
      <h1>{{ title_trip }}</h1>
      <div>
        <span>{{ tag }}</span>
        <span>{{ tag1 }}</span>
        <span>{{ tag3 }}</span>
        <span>{{ lian }}</span>
        <span>{{ shijian }}</span>
      </div>
    </div>

    <!-- 下方图片 -->
    <div class="main" v-for="{image1, kid} in photo" :key="kid">
      <img :src="`http://localhost:8080/${image1}`" />
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
  import MyHeader from "@/components/MyHeader.vue";
  import MyFooter from "@/components/MyFooter.vue";
  export default {
    components: {MyHeader, MyFooter},
    mounted() {
      this.getData();
      this.getPhoto();
    },
    data() {
      return {
        data: null,
        photo: null,
      };
    },
    methods: {
      getData() {
        const url = "header";
        this.axios.get(url).then(res => {
          console.log(res);
          this.data = res.data.result;
        });
      },

      getPhoto() {
        const url = "active";
        this.axios.get(url).then(res => {
          console.log(res);
          this.photo = res.data.result;
        });
      },
    },
  };
</script>

<style>
  .header {
    text-align: center;
  }
  .header h1 {
    font-size: 21px;
    font-weight: 300;
    margin-left: -240px;
  }
  .header span {
    display: inline-block;
    padding: 5px 4px;
    color: #b2b2b2;
  }
  .main {
    text-align: center;
  }
  .main img {
    width: 600px;
  }
</style>
